<template>
  <div class="address_search_wrapper">
    <search-header :headTitle="headTitle"></search-header>
    <div class="searchbox">
      <span class="iconfont">&#xe618;</span>
      <input v-model="searchValue" type="text" placeholder="请输入小区/写字楼/学校等" autofous="" class="search-input">
      <button type="button" @click.prevent="searchPlace()">搜索</button>
    </div>
    <div class="search_list" v-if="searchData">
      <div class="seachrow" v-for="(item, index) in searchData" :key="index" @click="choooedAddress(item)">
        <p class="seachrow_title">{{item.name}}</p>
        <p class="seachrow_location">{{item.address}}</p>
      </div>
    </div>
    <div v-else class="empty_tips">
      <p>找不到地址？</p>
      <p>尝试输入小区、写字楼或学校名</p>
      <p>详细地址（如门牌号等）可稍后输入哦</p>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import SearchHeader from '@/components/header/Header'
export default {
  name: 'SearchAddress',
  data () {
    return {
      headTitle: '搜索地址',
      searchValue: null, // 输入的搜索内容
      searchData: null // 搜索的结果
    }
  },
  components: {
    SearchHeader
  },
  computed: {
    ...mapState(['cityId'])
  },
  methods: {
    ...mapMutations(['CHOOSE_SEARCH_ADDRESS']),
    // 搜索
    searchPlace () {
      if (this.searchValue) {
        this.$api.home.searchNearby(this.cityId, this.searchValue).then(res => {
          this.searchData = res.data
        })
      }
    },
    // 选择搜素结果
    choooedAddress (item) {
      this.CHOOSE_SEARCH_ADDRESS(item)
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .address_search_wrapper
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    background-color: #fff
    overflow-y: auto
    z-index: 103
    padding-top .88rem
    .searchbox
      display: flex
      align-items: center
      justify-content: center
      padding: .25rem .29rem .14rem
      position: relative
      .iconfont
        position: absolute
        left: .5rem
        color: #bbb
        font-size: .25rem
      input
        flex: 1
        border: .01rem solid #ddd
        outline: 0
        color: #999
        height: .3rem
        font-size: .24rem
        margin-right: .2rem
        padding: .16rem .2rem .16rem .6rem
        border-radius: .05rem
        background: #f5f5f5
      button
        outline: none
        background-color: #0097ff
        color: #fff
        border-radius: .05rem
        width: 1.1rem
        height: .63rem
        font-size: .28rem
        white-space: nowrap
    .search_list
      padding-left .3rem
      .seachrow
        padding: .19rem 0
        border-bottom: .01rem solid #f5f5f5
        .seachrow_title
          color: #333
          font-size: .32rem
        .seachrow_location
          color: #999
          font-size: .26rem
    .empty_tips
      position: absolute
      top: 50%
      left: 50%
      transform: translate(-50%, -50%)
      width: 100%
      p
        sc(.25rem, #aaa)
        line-height: .35rem
        text-align: center
</style>
